<template>
  <view class="lock-screen-wrapper">
    <public-header title="锁屏设置" :onSetting="editable" :lockScreenSettings="lockScreenSettings" @set-lock="setLock">
    </public-header>
    <view class="lock-screen">
      <view class="lock-screen-left">
        <view class="lock-screen-title">
          锁屏效果
        </view>
        <view class="lock-screen-tip" v-if="lockScreenSettings.enabled">
          屏保图片（图片格式仅支持bmp\jpg\png)
        </view>
        <view class="lock-screen-tip margin-bottom" v-else>
          开启屏保后,可以设置无操作时自动锁屏,还可以开启锁屏按钮来实现快速锁屏,保护收银机信息的安全
        </view>
        <view class="padding-tb image-upload" v-if="lockScreenSettings.enabled">
          <uni-file-picker :value=[{url:imgUrl}] file-extname="png,jpg,bmp" :auto-upload="false" file-mediatype="image"
            limit="1" @select="selectPic"></uni-file-picker>
        </view>
        <view class="lock-screen-title" v-if="lockScreenSettings.enabled">
          屏保预览 <text v-if="imgUrl!==lockScreenSettings.imgUrl">（默认图）</text>
        </view>
        <view class="">
          <image :src="imgUrl" mode="aspectFill" class="bg-preview"></image>
        </view>
      </view>
      <view class="lock-screen-right">
        <view class="lock-screen-title">
          锁屏设置
        </view>
        <view class="lock-screen-form">
          <view class="lock-screen-form-item">
            <view class="label">
              使用锁屏功能
            </view>
            <view class="input">
              <u-switch v-model="lockScreenSettings.enabled" activeColor="#38C09E" @change="changeEnabled"></u-switch>
            </view>
          </view>
          <view class="lock-screen-setting" :class="{show:lockScreenSettings.enabled}">
            <view class="lock-screen-form-item">
              <view class="label">
                屏保锁屏方式
              </view>
              <view class="input">
                <uni-data-checkbox mode="tag" selectedColor="#38C09E" v-model="lockScreenSettings.lockWay"
                  :localdata="lockWays"></uni-data-checkbox>
              </view>
            </view>
            <view class="lock-screen-form-item">
              <view class="label flex-1">
                锁屏时间
              </view>
              <view class="input">
                <uni-data-select :clear="false" v-model="lockScreenSettings.lockTime" :localdata="lockTimes">
                </uni-data-select>
              </view>
            </view>
            <view class="lock-screen-form-item">
              <view class="label">
                快速锁屏按钮
              </view>
              <view class="input">
                <u-switch v-model="lockScreenSettings.fastButton" activeColor="#38C09E"></u-switch>
              </view>
            </view>
            <view class="lock-screen-form-item" v-if="lockScreenSettings.fastButton">
              <view class="label">
                编辑按钮位置
              </view>
              <view class="input">
                <u-switch v-model="editable" activeColor="#38C09E" @change="editableChagne"></u-switch>
              </view>
            </view>
          </view>
          <view class="flex-1 align-end flex padding-bottom-lg">
            <button class="button full-width lg" @click="saveSetting">保存</button>
          </view>
        </view>
      </view>
    </view>
    <view class="custom-center-popup">
      <u-popup :show="showTipPop" :round="20" mode="center" :overlay="true" :closeable="false"
        :closeOnClickOverlay="false" @close="closePopup">
        <view class="popup-title">
          温馨提示
        </view>
        <view class="tip-popup">
          <view class="">
            第一步：开启【快速锁屏按钮】选项
          </view>
          <view class="">
            第二步：开启【编辑按钮位置】选项，手动拖动锁屏图标至自己常用位置
          </view>
          <view class="">
            第三步：关闭【编辑按钮位置】选项，点击保存按钮
            <!-- 第三步：关闭【编辑按钮位置】选项，点击锁屏图标进行锁屏 -->
          </view>
          <button class="button full" @click="closePopup">我知道了</button>
        </view>
      </u-popup>
    </view>
    <!-- <text v-if="isPass">已设置图形密码</text>
    <text v-else>未设置图形密码</text>
    <text v-if="lineError">图形密码至少需要经过3个点</text>
    <hackout-draw-lock :width='width' background="rgba(0,0,0,0)" :circle-width="64" line-color="rgb(56, 192, 158)"
      line-background="rgba(56, 192, 158,.5)" :height='height' @change="onChange" @start="startDraw"></hackout-draw-lock> -->
  </view>
</template>

<script>
  var _self = null

  import lockscreen from '@/common/mixins/lockscreen.js'

  export default {
    mixins: [lockscreen],
    data() {
      return {
        editable: false,
        showTipPop: false,
        lockScreenSettings: {
          enabled: false, //使用锁屏功能
          fastButton: false, // 开启快速锁屏按钮
          lockWay: '活动解锁', // 解锁方式 活动解锁|密码解锁
          lockTime: 30, // 锁屏时间 单位-秒
          fastButtonX: 0,
          fastButtonY: 0,
          imgUrl: ""
        },
        lockWays: [{
            text: '活动解锁',
            value: '活动解锁'
          },
          {
            text: '密码解锁',
            value: '密码解锁'
          }
        ],
        lockTimes: [{
            text: '无操作5秒后',
            value: 5
          },
          {
            text: '无操作15秒后',
            value: 15
          },
          {
            text: '无操作30秒后',
            value: 30
          },
          {
            text: '无操作60秒后',
            value: 60
          },
          {
            text: '无操作10分钟后',
            value: 600
          }
        ],
        width: 1920,
        height: 1080,
        pass: '',
        isPass: false,
        lineError: false,
        picObj: null,
        imgUrl: "/static/images/lockScreen.png"
      }
    },
    computed: {

    },
    created() {
      let lockScreenSettings = this.$store.state?.$lockScreenSettings
      console.log(lockScreenSettings);
      if (typeof lockScreenSettings == 'object' && Object.keys(lockScreenSettings).length > 0) {
        if (lockScreenSettings?.imgUrl) {
          this.imgUrl = lockScreenSettings?.imgUrl
        }
        this.lockScreenSettings = JSON.parse(JSON.stringify(lockScreenSettings))
      }
    },
    watch: {
      imgUrl(newVal) {
        if (newVal) {
          this.lockScreenSettings.imgUrl = newVal
          // this.picObj.base64Url = newVal
        }
      },
      lockScreenSettings: {
        deep: true,
        // immediate:true,
        handler(newValue, oldValue) {
          if (newValue?.lockWay && this.imgUrl) {
            newValue.imgUrl = this.imgUrl
          }
          // this.$store.commit('SET_LOCK_SCREEN', newValue)
        }
      }
    },
    onLoad() {
      _self = this
      _self.isPass = uni.getStorageSync('line_pass');
    },
    methods: {
      editableChagne(e) {
        console.log(e);
      },
      setLock(e) {
        this.lockScreenSettings = e
      },
      saveSetting() {
        this.$store.commit('SET_LOCK_SCREEN', this.lockScreenSettings)
        // uni.navigateBack()
        this.waitLockScreen?.()
        uni.showToast({
          title: '保存成功'
        })
      },
      closePopup() {
        this.showTipPop = false
      },
      changeEnabled(e) {
        console.log(e);
        if (e === true) {
          this.showTipPop = true
        }
      },
      pathToBase64(path) {
        return new Promise(function(resolve, reject) {
          // app
          if (typeof plus === 'object') {
            plus.io.resolveLocalFileSystemURL(path, function(entry) {
              entry.file(function(file) {
                var fileReader = new plus.io.FileReader()
                fileReader.onload = function(evt) {
                  resolve(evt.target.result)
                }
                fileReader.onerror = function(error) {
                  reject(error)
                }
                fileReader.readAsDataURL(file)
              }, function(error) {
                reject(error)
              })
            }, function(error) {
              reject(error)
            })

            return
          }

          // 微信小程序
          if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
            wx.getFileSystemManager().readFile({
              filePath: path,
              encoding: 'base64',
              success: function(res) {
                resolve('data:image/png;base64,' + res.data)
              },
              fail: function(error) {
                reject(error)
              }
            })

            return
          }

          reject(new Error('not support'))
        })
      },

      selectPic(e) {
        if (Array.isArray(e?.tempFiles) && e.tempFiles.length > 0) {
          this.picObj = e.tempFiles[0]
          // #ifdef APP
          if (this.picObj.path) {
            this.pathToBase64(this.picObj.path).then(base64 => {
              this.imgUrl = base64
            })
          }
          // #endif
          // #ifdef H5
          if (this.picObj.file) {
            const blobToDataURL = (blob, cb) => {
              let reader = new FileReader();
              reader.onload = function(evt) {
                let base64 = evt.target.result;
                cb(base64);
              };
              reader.readAsDataURL(blob);
            };
            blobToDataURL(this.picObj.file, (base64) => {
              this.imgUrl = base64
            })
          }
          // #endif

        }
      },
      //图形密码绘制完成
      onChange(data) {
        if (data.length < 3) {
          _self.lineError = true
          return;
        }
        this.pass = data.join('')
        //保存图形密码
        uni.setStorageSync('line_pass', this.pass)
        //验证图形密码
        if (this.pass != this.isPass) {
          // alert("图形密码不正确")
        } else {
          //你的逻辑
        }
      },
      startDraw() {
        this.lineError = false
        this.pass = ''
      }
    }
  }
</script>
<style lang="scss" scoped>
  .lock-screen-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--window-top) - var(--window-bottom));
  }

  ::v-deep .uni-data-checklist .checklist-group {
    justify-content: flex-end;
  }

  .lock-screen {
    display: flex;
    flex: 1;

    &-left {
      flex: 1;
      margin: 2rem 0;
      margin-right: 2rem;
      background-color: #fff;
      padding: 0 2rem;

      .bg-preview {
        width: 34.6vw;
        height: 19.4vw;
      }

      .image-upload {
        width: 60rem;

        // height: 20rem;
        .uni-file-picker,
        .uni-file-picker__container {
          width: 100%;
          height: 100%;
        }
      }
    }

    &-right {
      width: 60rem;
      background-color: #fff;
      padding: 0 2rem;
      display: flex;
      flex-direction: column;

    }

    &-title {
      font-size: 2.8rem;
      line-height: 4rem;
      font-weight: bold;
      padding: 2rem 0;
    }

    &-tip {
      font-size: 2.4rem;
      color: #808080;
    }

    &-setting {
      height: 0;
      overflow: hidden;
      transition: height 0.5s ease;

      &.show {
        height: 50rem;
      }
    }

    &-form {
      display: flex;
      flex: 1;
      flex-direction: column;

      &-item {
        height: 7rem;
        padding: 0 1.6rem;
        margin-bottom: 1.6rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #E5E5E5;
        border-radius: 1rem;

        .label {
          margin-right: 2rem;
        }

        .input {
          display: flex;
          flex: 1;
          justify-content: flex-end;
          ::v-deep .checklist-text{
            font-size: 12px;
          }
        }
      }
    }
  }

  .popup-title {
    text-align: center;
    padding: 2rem;
  }

  .tip-popup {
    font-size: 2.4rem;
    line-height: 4rem;
    padding: 0 4rem 2rem;

    .button {
      margin: 4rem 0 2rem;
    }
  }
</style>
